<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>云境商店 - 游戏库</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='90' font-size='90'>🎮</text></svg>">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#6366F1',
            secondary: '#8B5CF6',
            accent: '#EC4899',
            dark: '#1E293B',
            light: '#F8FAFC'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .glass {
        @apply bg-white/10 backdrop-blur-lg border border-white/20 shadow-lg;
      }
      .glass-hover {
        @apply transition-all duration-300 hover:bg-white/20 hover:shadow-xl;
      }
      .sidebar-item {
        @apply flex items-center gap-3 px-4 py-3 rounded-lg glass-hover text-white/90 hover:text-white;
      }
      .sidebar-item.active {
        @apply bg-primary/30 border-l-4 border-primary;
      }
      .game-card {
        @apply rounded-xl overflow-hidden glass glass-hover transform transition-all duration-300 hover:-translate-y-1;
      }
      .category-tag {
        @apply text-xs px-3 py-1 rounded-full glass-hover cursor-pointer transition-all;
      }
      .category-tag.active {
        @apply bg-primary/30 border border-primary/50;
      }
    }

    /* 美化滑动条 - 磨砂玻璃效果 */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    ::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(8px);
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: background 0.2s ease;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.3);
    }

    /* 自定义标题栏 - 磨砂玻璃效果 */
    .custom-titlebar {
      height: 32px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 0 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      -webkit-app-region: drag;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9999;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .window-controls {
      display: flex;
      gap: 4px;
      -webkit-app-region: no-drag;
    }

    .custom-titlebar span {
      -webkit-app-region: drag;
    }

    .window-control-btn {
      width: 28px;
      height: 20px;
      border-radius: 4px;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      cursor: pointer;
      font-size: 12px;
      color: white;
      transition: all 0.2s ease;
    }

    .window-control-btn:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .close-btn:hover {
      background: rgba(255, 95, 87, 0.8);
    }

  </style>
</head>
<body class="font-inter bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800 min-h-screen text-white overflow-x-hidden">
    <!-- 自定义标题栏 -->
    <div class="custom-titlebar flex items-center">
        <div class="flex items-center mr-auto">
          <img src="src/assets/logo.webp" alt="Logo" class="h-6 mr-2">
          <span class="text-sm font-medium">云镜商店</span>
        </div>
      <div class="window-controls">
        <button id="minimize-btn" class="window-control-btn">−</button>
        <button id="maximize-btn" class="window-control-btn">□</button>
        <button id="close-btn" class="window-control-btn close-btn">×</button>
      </div>
    </div>

  <!-- 系统标题栏已移除 -->
  <!-- 背景装饰 -->
  <div class="fixed inset-0 -z-10 overflow-hidden">
    <div class="absolute top-0 left-1/4 w-96 h-96 bg-primary/30 rounded-full filter blur-3xl"></div>
    <div class="absolute bottom-0 right-1/3 w-96 h-96 bg-secondary/30 rounded-full filter blur-3xl"></div>
    <div class="absolute top-1/2 left-1/3 w-64 h-64 bg-accent/20 rounded-full filter blur-3xl"></div>
  </div>

  <div class="flex h-screen">
    <!-- 侧边栏 -->
    <aside class="w-64 glass h-full fixed left-0 top-8 z-30 flex flex-col transition-all duration-300 ease-in-out" id="sidebar">
      <!-- Logo -->
      <div class="p-6 flex items-center gap-3 border-b border-white/10">
          <div class="w-10 h-10 rounded-lg overflow-hidden">
            <img src="src/assets/logo.webp" alt="Logo" class="w-full h-full object-contain">
          </div>
          <h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-300">云境商店</h1>
        </div>

        <!-- 搜索框 -->
        <div class="px-4 pb-4 mt-6">
          <div class="relative w-full">
            <input type="text" placeholder="搜索游戏..." class="w-full bg-white/10 border border-white/20 rounded-full py-2 pl-10 pr-4 focus:outline-none focus:ring-2 focus:ring-primary/50 text-white placeholder-gray-400 text-sm">
            <i class="fa fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
          </div>
        </div>

      <!-- 导航菜单 -->
      <nav class="flex-1 py-6 px-3">
        <div class="space-y-1 mb-32">
          <p class="text-xs uppercase text-gray-400 px-4 mb-3">主菜单</p>
          <a href="index.html" class="sidebar-item">
            <i class="fa fa-home w-5 text-center"></i>
            <span>首页</span>
          </a>
          <a href="games.html" class="sidebar-item active">
            <i class="fa fa-th-large w-5 text-center"></i>
            <span>游戏库</span>
          </a>
        </div>
      </nav>
    </aside>

    <!-- 主内容区 -->
    <main class="flex-1 ml-64 p-8 overflow-y-auto pt-8">
  <div id="view-container">
    <!-- 游戏列表视图 -->
    <div id="game-list-view">
      <!-- 顶部工具栏 -->
      <div class="flex justify-between items-center mb-8">
        <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-300">游戏库</h1>
        <div class="flex items-center gap-3">


        </div>
      </div>

      <!-- 游戏列表 -->

      <!-- 游戏列表 -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        <!-- 游戏卡片 1 -->
        <div class="game-card">
          <div class="relative h-48">
            <img src="./src/assets/xinjunchenglu.webp" alt="游戏封面" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="300">
            <div class="absolute top-3 left-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded-full">免费</div>
          </div>
          <div class="p-4">
            <h3 class="font-bold text-lg mb-1 line-clamp-1">新君成录</h3>
            <p class="text-sm text-gray-300 mb-3 line-clamp-2">经典《君成录》全新升级，新编辑器匠心重制，邀您共赴锦绣山河。</p>

            <div class="flex justify-between items-center">
              <div class="text-gray-300 text-sm">
                <span>糖融未来</span>
              </div>
              <button class="bg-gradient-to-r from-primary to-secondary hover:opacity-90 px-4 py-2 rounded-full text-sm font-medium transition-all">
                暂无
              </button>
            </div>
          </div>
        </div>

        <!-- 游戏卡片 2 -->
        <div class="game-card">
          <div class="relative h-48">
            <img src="./src/assets/juncheng.webp" alt="游戏封面" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="300">
            <div class="absolute top-3 left-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded-full">免费</div>
          </div>
          <div class="p-4">
            <h3 class="font-bold text-lg mb-1 line-clamp-1">君成录伯爵版</h3>
            <p class="text-sm text-gray-300 mb-3 line-clamp-2">指尖定江山，朝堂谋天下；红颜伴霸业，千古一局棋。</p>

            <div class="flex justify-between items-center">
              <div class="text-gray-300 text-sm">
                <span>RIEN伯爵</span>
              </div>
              <a href="https://pan.baidu.com/s/1yourdownloadcode" class="netdisk-link bg-gradient-to-r from-primary to-secondary hover:opacity-90 px-4 py-2 rounded-full text-sm font-medium transition-all" onclick="event.preventDefault(); electronAPI.openExternalLink(this.href);">
                下载
              </a>
            </div>
          </div>
        </div>

        <!-- 游戏卡片 3 -->
        <div class="game-card">
          <div class="relative h-48">
            <img src="./src/assets/tiechan.webp" alt="游戏封面" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="300">
            <div class="absolute top-3 left-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded-full">免费</div>
          </div>
          <div class="p-4">
            <h3 class="font-bold text-lg mb-1 line-clamp-1">君成录铁铲版</h3>
            <p class="text-sm text-gray-300 mb-3 line-clamp-2">体验极致速度与激情，驾驶各种超级跑车在赛道上飞驰。</p>

            <div class="flex justify-between items-center">
              <div class="text-gray-300 text-sm">
                <span>铁铲团队</span>
              </div>
              <a href="https://pan.baidu.com/s/1yourdownloadcode" class="netdisk-link bg-gradient-to-r from-primary to-secondary hover:opacity-90 px-4 py-2 rounded-full text-sm font-medium transition-all" onclick="event.preventDefault(); electronAPI.openExternalLink(this.href);">
                下载
              </a>
            </div>
          </div>
        </div>

        <!-- 游戏卡片 4 -->
        <div class="game-card">
          <div class="relative h-48">
            <img src="./src/assets/xianyu.webp" alt="游戏封面" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="300">
            <div class="absolute top-3 left-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded-full">免费</div>
          </div>
          <div class="p-4">
            <h3 class="font-bold text-lg mb-1 line-clamp-1">君成录咸鱼版</h3>
            <p class="text-sm text-gray-300 mb-3 line-clamp-2">建造并管理属于你的城市，规划交通、发展经济、满足市民需求。</p>

            <div class="flex justify-between items-center">
              <div class="text-gray-300 text-sm">
                <span>咸鱼</span>
              </div>
              <a href="https://pan.baidu.com/s/1yourdownloadcode" class="netdisk-link bg-gradient-to-r from-primary to-secondary hover:opacity-90 px-4 py-2 rounded-full text-sm font-medium transition-all" onclick="event.preventDefault(); electronAPI.openExternalLink(this.href);">
                下载
              </a>
            </div>
          </div>
        </div>

        <!-- 游戏卡片 5 -->
        <div class="game-card">
          <div class="relative h-48">
            <img src="./src/assets/xioayao.webp" alt="游戏封面" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="300">
            <div class="absolute top-3 left-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded-full">免费</div>
          </div>
          <div class="p-4">
            <h3 class="font-bold text-lg mb-1 line-clamp-1">君成录逍遥版</h3>
            <p class="text-sm text-gray-300 mb-3 line-clamp-2">探索随机生成的地牢，收集宝藏，击败怪物，寻找出口。</p>

            <div class="flex justify-between items-center">
              <div class="text-gray-300 text-sm">
                <span>逍遥游</span>
              </div>
              <a href="https://pan.baidu.com/s/1yourdownloadcode" class="netdisk-link bg-gradient-to-r from-primary to-secondary hover:opacity-90 px-4 py-2 rounded-full text-sm font-medium transition-all" onclick="event.preventDefault(); electronAPI.openExternalLink(this.href);">
                下载
              </a>
            </div>
          </div>
        </div>

        <!-- 游戏卡片 6 -->
        <div class="game-card">
          <div class="relative h-48">
            <img src="./src/assets/meigui.webp" alt="游戏封面" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="300">
            <div class="absolute top-3 left-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded-full">免费</div>
          </div>
          <div class="p-4">
            <h3 class="font-bold text-lg mb-1 line-clamp-1">君成录玫瑰版</h3>
            <p class="text-sm text-gray-300 mb-3 line-clamp-2">指挥太空舰队，抵御外星入侵，保护地球安全。</p>

            <div class="flex justify-between items-center">
              <div class="text-gray-300 text-sm">
                <span>路灯下的橙玫瑰</span>
              </div>
              <a href="https://pan.baidu.com/s/1yourdownloadcode" class="netdisk-link bg-gradient-to-r from-primary to-secondary hover:opacity-90 px-4 py-2 rounded-full text-sm font-medium transition-all" onclick="event.preventDefault(); electronAPI.openExternalLink(this.href);">
                下载
              </a>
            </div>
          </div>
        </div>

        <!-- 游戏卡片 7 -->
        <div class="game-card">
          <div class="relative h-48">
            <img src="./src/assets/huahua.webp" alt="游戏封面" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="300">
            <div class="absolute top-3 left-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded-full">免费</div>
          </div>
          <div class="p-4">
            <h3 class="font-bold text-lg mb-1 line-clamp-1">君成录花花版</h3>
            <p class="text-sm text-gray-300 mb-3 line-clamp-2">被困荒岛，收集资源，建造庇护所，制作工具，寻找生存之道。</p>

            <div class="flex justify-between items-center">
              <div class="text-gray-300 text-sm">
                <span>发财花椰菜</span>
              </div>
              <a href="https://pan.baidu.com/s/1G9_kAH8xG7aWeEGtWewhWA?pwd=2025" class="netdisk-link bg-gradient-to-r from-primary to-secondary hover:opacity-90 px-4 py-2 rounded-full text-sm font-medium transition-all" onclick="event.preventDefault(); electronAPI.openExternalLink(this.href);">
                下载
              </a>
            </div>
          </div>
        </div>

        <!-- 游戏卡片 8 -->
        <div class="game-card">
          <div class="relative h-48">
            <img src="./src/assets/xuanming.webp" alt="游戏封面" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="300">
            <div class="absolute top-3 left-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded-full">免费</div>
          </div>
          <div class="p-4">
            <h3 class="font-bold text-lg mb-1 line-clamp-1">君成录玄明版</h3>
            <p class="text-sm text-gray-300 mb-3 line-clamp-2">多种赛道和赛车选择，体验风驰电掣的快感。</p>

            <div class="flex justify-between items-center">
              <div class="text-gray-300 text-sm">
                <span>玄明</span>
              </div>
              <a href="https://pan.baidu.com/s/1yourdownloadcode" class="netdisk-link bg-gradient-to-r from-primary to-secondary hover:opacity-90 px-4 py-2 rounded-full text-sm font-medium transition-all" onclick="event.preventDefault(); electronAPI.openExternalLink(this.href);">
                下载
              </a>
            </div>
          </div>
        </div>
      </div>
        </div>


  </div>
</main>
  </div>

  <!-- JavaScript -->
  <script>
    // 窗口控制功能
    document.addEventListener('DOMContentLoaded', () => {
      // 窗口控制按钮
      const minimizeBtn = document.getElementById('minimize-btn');
      const maximizeBtn = document.getElementById('maximize-btn');
      const closeBtn = document.getElementById('close-btn');
      let isMaximized = false;

      // 窗口控制事件
      if (minimizeBtn) {
        minimizeBtn.addEventListener('click', () => {
          window.electronAPI.minimizeWindow();
        });
      }

      if (maximizeBtn) {
        maximizeBtn.addEventListener('click', () => {
          window.electronAPI.maximizeWindow();
          isMaximized = !isMaximized;
          maximizeBtn.textContent = isMaximized ? '▢' : '□';
        });
      }

      if (closeBtn) {
        closeBtn.addEventListener('click', () => {
          window.electronAPI.closeWindow();
        });
      }

      // 监听窗口状态变化
      window.electronAPI.onWindowMaximized(() => {
        isMaximized = true;
        if (maximizeBtn) maximizeBtn.textContent = '▢';
      });

      window.electronAPI.onWindowUnmaximized(() => {
        isMaximized = false;
        if (maximizeBtn) maximizeBtn.textContent = '□';
      });

      // 固定侧边栏显示（非移动端）
      const sidebar = document.getElementById('sidebar');
      sidebar.classList.remove('-translate-x-full');


    });
  </script>
</body>
</html>